import React, { Component } from 'react';
import style from './index.module.css'
const [rect, circle, text, path, line, polyline, polygon] = new Array(10).fill(null).map((_, i) => i + 1)
class Page extends Component {
    state = {
        mode: line,
        svg: '<line x1="0" y1="0" x2="100" y2="50" stroke="black"/>'
    }
    componentDidMount() {
        this.changeMode(line)
    }
    render() {
        return (
            <div className='page-container page flex-page' style={{ top: (this.props.page * 100) + '%' }}>
                <div className={style.container2} style={{ transform: `translateX(${this.props.percent - 100}%)` }}>
                    <p className={style.buttonGroup}>
                        <button className={this.state.mode === line ? style.active : null}
                            onClick={() => this.changeMode(line)}
                        >线条</button>
                        <button className={this.state.mode === polyline ? style.active : null}
                            onClick={() => this.changeMode(polyline)}
                        >折线</button>
                        <button className={this.state.mode === rect ? style.active : null}
                            onClick={() => this.changeMode(rect)}
                        >矩形</button>
                        <button className={this.state.mode === polygon ? style.active : null}
                            onClick={() => this.changeMode(polygon)}
                        >多边形</button>
                        <button className={this.state.mode === circle ? style.active : null}
                            onClick={() => this.changeMode(circle)}
                        >圆形</button>
                        <button className={this.state.mode === path ? style.active : null}
                            onClick={() => this.changeMode(path)}
                        >路径</button>
                        <button className={this.state.mode === text ? style.active : null}
                            onClick={() => this.changeMode(text)}
                        >文本</button>
                    </p>
                    <div>
                        <pre><code>
                            {`<svg viewBox='0 0 200 250'>`}
                        </code></pre>
                        <textarea rows={10} cols={40} className={style.input} value={this.state.svg} onChange={this.changeSvg}></textarea>
                        <pre><code>
                            {`</svg>`}
                        </code></pre>
                    </div>
                    <div className={style.introduce}>
                        {this.state.mode===line&&<p>Line 绘制直线。它取两个点的位置作为属性，指定这条线的起点和终点位置。</p>}
                        {this.state.mode===polyline&&<p>Polyline是一组连接在一起的直线。因为它可以有很多的点，折线的的所有点位置都放在一个points属性中。</p>}
                        {this.state.mode===circle&&<p>Circle元素会在屏幕上绘制一个圆形。它只有3个属性用来设置圆形。</p>}
                        {this.state.mode===rect&&<p>Rect元素会在屏幕上绘制一个矩形 。其实只要6个基本属性就可以控制它在屏幕上的位置和形状。 上面的图例中最先展示了2个矩形，虽然这有点冗余了。右边的那个图形设置了rx和ry属性用来控制圆角。如果没有设置圆角，则默认为0.</p>}
                        {this.state.mode===polygon&&<p>Polygon和折线很像，它们都是由连接一组点集的直线构成。不同的是，polygon的路径在最后一个点处自动回到第一个点。需要注意的是，矩形也是一种多边形，如果需要更多灵活性的话，你也可以用多边形创建一个矩形。</p>}
                        {this.state.mode===path&&<p>Path可能是SVG中最常见的形状。你可以用path元素绘制矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。</p>}
                        {this.state.mode===text&&<p>Text元素内部可以放任何的文字。属性x和属性y性决定了文本在视口中显示的位置。属性text-anchor，可以有这些值：start、middle、end或inherit，允许决定从这一点开始的文本流的方向。</p>}
                    </div>
                </div>
                <div className={style.container2} style={{ transform: `translateX(${100 - this.props.percent}%)` }}>
                    <svg dangerouslySetInnerHTML={{ __html: this.state.svg }} viewBox='0 0 200 250' >
                    </svg>
                </div>
                <div className='title' style={{ transform: `translateX(${this.props.percent - 100}%)` }}>快速入门</div>
            </div>
        );
    }
    changeSvg = (e) => {
        this.setState({
            svg: e.target.value
        })
    }
    changeMode = mode => {
        let svg=''
        switch (mode) {
            case rect:
                svg='<rect x="60" y="10" rx="10" ry="10" width="30" height="30" fill="none" stroke="black"/>'
                break;
            case circle:
                svg='<circle cx="25" cy="75" r="20" fill="none" stroke="black"/>'
                break;
            case text:
                svg='<text x="10" y="10">Hello World!</text>'
                break;
            case path:
                svg='<path d="M 20 230 Q 40 205, 50 230 T 90 230" fill="none" stroke="black"/>'
                break;
            case line:
                svg='<line x1="0" y1="0" x2="100" y2="50" stroke="black"/>'
                break;
            case polyline:
                svg='<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145" fill="none" stroke="black"/>'
                break;
            case polygon:
                svg='<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180" fill="none" stroke="black"/>'
                break;
            default:
        }
        this.setState({
            mode,svg
        })
    }
}

export default Page;
